<template>
  <div class="search">
    <i class="iconfont icon-chaxun" @click="search"></i>
    <input type="search" v-model:value="value" @search="search" placeholder="输入地名搜索">
  </div>
</template>

<script>

import {getReportByAreaName, listReportByAreaCode} from "@/api/res";
import {mapMutations} from "vuex";

export default {
  name: "Search",
  data() {
    return {
      value: null
    }
  },
  methods: {
    ...mapMutations(['addReport', 'setLoading', 'setActive']),
    search() {
      // console.log("=====加载中=====")

      this.setLoading(true);
      let now = new Date();
      if (this.value && this.value !== '') {
        getReportByAreaName(this.value).then(res1 => {
          this.value = null;
          if (res1.data == null) {
            this.setLoading(false);
            this.setActive(null)
            return
          }
          if (res1.code === 10000) {
            listReportByAreaCode(res1.data.areaCode).then(res2 => {
              console.log(res2)
              this.addReport({
                ...res1.data,
                "searchTime": now.toLocaleDateString().replaceAll('/', '-')
                    + '  '
                    + now.toTimeString().substring(0, 8),
                "allInfo": res2.data
              })
              this.setLoading(false);
              // console.log("=====加载完毕=====")
            })
          } else {
            this.setActive(null)
            this.setLoading(false);
          }
        })
      } else {
        this.setLoading(false);
      }
    }
  }

}
</script>

<style lang="less">
.search {
  width: 200px;
  height: 46px;
  display: flex;

  input {
    outline: none;
    height: 38px;
    background-color: var(--background-color);
    margin: 4px 0 4px 0;
  }

  input[type=search] {
    font-family: inherit;
    font-size: 10px;
  }

  input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    position: relative;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background: url("../assets/img/closed.png") no-repeat center;
    background-size: 100% 100%;
    cursor: pointer;
    color: rgba(0, 0, 0, 0);
  }

  //input::-webkit-search-cancel-button {
  //  display: none;
  //}

  input[type=search] {
    border: solid 1px #ccc;
    padding: 9px 10px 9px 35px;
    width: 110px;

    border-radius: 20px;
    transition: all .5s;
  }

  input[type=search]:focus {
    width: 170px;
    background-color: var(--background-active-color);
  }

  input:-moz-placeholder {
    color: #999;
  }

  .icon-chaxun {
    //width: 20px;
    //height: 20px;
    margin: 13px -30px 13px 5px;
    cursor: pointer;
    z-index: 100;
    font-size: 20px;
    border-radius: 20px;
  }
}

</style>